import { useState } from 'react';

function Form(props) {
  const { addTodo } = props;
  const [todoText, setTodoText] = useState('');

  const onAddTodo = () => {
    if (todoText.length === 0) return;

    addTodo({
      id: new Date().getTime(),
      content: todoText,
      completed: false
    });

    setTodoText('');
  };

  return (
    <div>
      <input
        type="text"
        value={todoText}
        onChange={(e) => setTodoText(e.target.value)}
        placeholder="Please input something..."
      />
      <button onClick={onAddTodo}>ADD</button>
    </div>
  );
}

export default Form;
